<template>
  <div class="home">
    <h1>姓名-----{{person.name}}</h1>
    <h1>年龄-----{{person.age}}</h1>
    <h1>code-----{{person.job.j1.code}}</h1>
    <button @click="person.job.j1.code++">修改code</button>
    <button @click="person.name+='~'">修改name</button>
    <button @click="person.age++">修改age</button>
    <hr>
    <h1>{{count}}</h1>
    <button @click="count++">修改count</button>
    <hr>
    <h1>{{msg}}</h1>
    <button @click="msg+='!'">修改msg</button>
    <input type="text" v-model="computedCountAndMsg">
    <h5>{{computedCountAndMsg}}</h5>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, watchEffect } from "vue";
import AboutViewVue from "./AboutView.vue";
    let count=ref(0)
    let msg=ref('gf')
    let person=reactive({
      name:'lz',
      age:10,
      job:{
        j1:{
          code:12
        }
      }
    })
    //ref声明的变量取值要用.value
    //监听ref一个数据
    // watch(count,(newValue,oldValue)=>{
    //   console.log('count改变',newValue,oldValue);
    // },{immediate:true})
    //监听ref多个数据
    watch([count,msg],(newValue,oldValue)=>{
      console.log(newValue,oldValue);//[2, 'gf!!'] [2, 'gf!']
      if(newValue[0]===oldValue[0]){
        console.log('msg改变',newValue[1],oldValue[1]);
      }else{
        console.log('count改变',newValue[0],oldValue[0]);
      }
    },{immediate:false})
    //监听reactive响应式数据
    //!!!!!!!!!!注意 watch监听reactive数据拿不到oldValue，强制开启deep深度监听
    // watch(person,(newValue,oldValue)=>{
    //   console.log('person改变了',newValue,oldValue);
    // })
    //监听对象的某一个属性,()=>person.name需要把需要的属性写成一个回调函数，并且可以拿到oldValue
    watch(()=>person.name,(newValue,oldValue)=>{
      console.log('person.name改变了',newValue,oldValue);
    })
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log('person.name或者age改变了',newValue,oldValue);
    })
    //深度监听，拿不到oldValue的值
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person.job改变了',newValue,oldValue);
    },{deep:true})
    
    //计算属性（此时计算属性是只读的）
    // const computedCountAndMsg=computed(()=>{
    //   return `${count.value}+${msg.value}`
    // })
    //计算属性（考虑读和写）
    const computedCountAndMsg=computed({
      get(){
        return `${count.value}+${msg.value}`
      },
      set(value){
        let arr=value.split('+')
        count.value=arr[0]
        msg.value=arr[1]
      }
    })
    //watchEffect其中依赖的值发生改变就会执行回调
    watchEffect(()=>{
      let x1=count.value
      let x2=msg.value
      console.log('依赖的值发生改变了');
    })
  
</script>
